import Utils from 'common/utils';
import { observable, computed, action } from 'mobx';


const stringExtendStyle = (array) => {
  let rs = [];
  array.forEach(item => {
    switch (item.key) {
      case 'rotate': {
        rs.push(`rotate(${item.val}deg)`);
        break;
      }
      case 'rotateX': {
        rs.push(`rotateX(${item.val}deg)`);
        break;
      }
      case 'rotateY': {
        rs.push(`rotateY(${item.val}deg)`);
        break;
      }
      case 'brightness': {
        rs.push(`brightness(${item.val}%)`);
        break;
      }
      case 'blur': {
        rs.push(`blur(${item.val}px)`);
        break;
      }
      case 'contrast': {
        rs.push(`contrast(${item.val}%)`);
        break;
      }
      case 'saturate': {
        rs.push(`saturate(${item.val}%)`);
        break;
      }
      case 'grayscale': {
        rs.push(`grayscale(${item.val}%)`);
        break;
      }
      case 'hueRotate': {
        rs.push(`hue-rotate(${item.val}deg`);
        break;
      }
      // case 'invert': {
      //   rs.push(`invert(${item.val}%`);
      //   break;
      // }
    }
  });
  return rs.join('');

};

export default class Text {
  @observable left = 0;
  @observable top = 0;
  @observable width = 30;
  @observable height = 30;
  @observable side = 3;
  @observable background = 'green';
  @observable display = 'block';
  @observable opacity = 1;
  @observable brightness = 100;
  @observable blur = 0;
  @observable contrast = 100;
  @observable saturate = 100;
  @observable grayscale = 0;
  @observable hueRotate = 0;
  // @observable invert = 50;
  @observable rotate = 0;
  @observable rotateX = 0;
  @observable rotateY = 0;
  @observable borderWidth = 1;
  @observable borderColor = 'red';
  @observable borderStyle = '';

  @observable letterSpacing = 0;
  @observable fontSize = 18;
  @observable fontWeight = 'normal';
  @observable fontStyle = 'normal';
  @observable textDecoration = 'none';
  @observable textAlign = 'left';
  @observable vertical = '';

  @observable src = '//timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=' +
    '1507612551256&di=99c6333d24545d9bf06e18d1e1c5fa15&imgtype=0&src=' +
    'http%3A%2F%2Fd.hiphotos.baidu.com%2Fzhidao%2Fpic%2Fitem%2F8cb1cb1349540923667db2cf9058d109b3de496f.jpg';



  constructor({ ...data }) {
    this.init({
      ...data,
      label: '图片',
      type: 'image',
    });
  }

  @computed get styleWrapper() {
    return {
      left: this.left,
      top: this.top,
      width: this.width,
      height: this.height,
      // background: this.background,
      opacity: this.opacity,
      // borderWidth: this.borderWidth,
      // borderColor: this.borderColor,
      // borderStyle: this.borderStyle,
      filter: stringExtendStyle([
        {
          key: 'brightness',
          val: this.brightness,
        },
        {
          key: 'blur',
          val: this.blur,
        },
        {
          key: 'contrast',
          val: this.contrast,
        },
        {
          key: 'saturate',
          val: this.saturate,
        },
        {
          key: 'grayscale',
          val: this.grayscale,
        },
        {
          key: 'hueRotate',
          val: this.hueRotate,
        },
        // {
        //   key: 'invert',
        //   val: this.invert,
        // }
      ]),
      transform: stringExtendStyle([
        {
          key: 'rotate',
          val: this.rotate,
        },
        {
          key: 'rotateX',
          val: this.rotateX,
        },
        {
          key: 'rotateY',
          val: this.rotateY,
        }
      ])
    };
  }
  @computed get styleText() {
    return {
      letterSpacing: this.letterSpacing,
      fontSize: this.fontSize,
      fontWeight: this.fontWeight,
      fontStyle: this.fontStyle,
      textDecoration: this.textDecoration,
      textAlign: this.textAlign,
      opacity: this.opacity,
      display: this.display,
      writingMode: this.vertical,
      filter: stringExtendStyle([
        {
          key: 'blur',
          val: this.blur,
        },
      ]),
    };
  }


  @action init({ label, ...other }) {
    this.label = label;
    this.title = Utils.guid(label);
    Object.keys(other).map(key => {
      this[key] = other[key];
    });
  }

  @action setAttr(key, val) {
    this[key] = val;
  }

  // 边数设置
  @action setSide(num) {
    this.side = num;

  }

  @action addNumber() {
    if (this.borderWidth < 10) {
      this.borderWidth = this.borderWidth + 1;
    } else {
      this.borderWidth = 10;
    }
  }

  @action decNumber() {
    if (this.borderWidth > 1) {
      this.borderWidth = this.borderWidth - 1;
    } else {
      this.borderWidth = 1;
    }

  }

  // 文字排列方式
  @action textHorizontal(ind) {
    this.vertical = ind === 0 ? '' : 'vertical-lr';
  }

  @action textStrong() {
    this.fontWeight = this.fontWeight === 'normal' ? 'bold' : 'normal';
  }
  @action textItalic() {
    this.fontStyle = this.fontStyle === 'normal' ? 'italic' : 'normal';
  }
  @action textUnderline(text) {
    if (text === 'underline') {
      this.textDecoration = this.textDecoration === 'line-through' || this.textDecoration === 'none' ? 'underline' : 'none';
    } else {
      this.textDecoration = this.textDecoration === 'underline' || this.textDecoration === 'none' ? 'line-through' : 'none';
    }

  }


}




